<template>
  <div>
    <el-card>
      <el-form :model="manager" label-width="100px">
        <el-form-item label="管理员ID">
          <el-input v-model="manager.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="管理员名称">
          <el-input v-model="manager.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="manager.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="manager.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="电子邮件">
          <el-input v-model="manager.email" disabled></el-input>
        </el-form-item>
        <el-form-item label="员工卡">
          <el-input v-model="manager.employeeCard" disabled></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="manager.idCard" disabled></el-input>
        </el-form-item>

        <!-- 审核组件 -->
        <el-form-item label="审核状态">
          <el-select v-model="auditStatus" placeholder="请选择">
            <el-option label="通过" value="2"></el-option>
            <el-option label="驳回" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="auditStatus === '3'" label="拒绝原因">
          <el-input v-model="rejectReason" placeholder="请输入拒绝原因"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAudit">提交审核</el-button>
          <el-button @click="getNext">下一条</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      manager: {}, // 管理员信息
      auditStatus: '', // 当前选择的审核状态
      rejectReason: '', // 拒绝原因

      // 保存下一条数据id
      nextId: ''
    }
  },

  // 页面创建时就申请一条数据
  created () {
    this.getNextManager() // 页面创建时获取第一条记录
  },

  methods: {
    // 获取下一条未审核数据
    async getNextManager () {
      try {
        const { data } = await axios.get('http://localhost:8080/pixington/audit/manager/getOne')
        if (data.code === 0) {
          this.manager = data.data.managerVO
          this.nextId = data.data.id
          this.auditStatus = '' // 重置审核状态选择
          this.rejectReason = '' // 清空拒绝原因
        }
      } catch (error) {
        // 网络请求错误处理
        console.error(error)
      }
    },

    // 如果没有审核，就不允许跳过
    getNext () {
      // 提交前先判断
      if (!this.auditStatus) {
        this.$message({
          message: '请先审核',
          duration: 2000,
          type: 'warning'
        })
      }
      this.getNextManager()
    },

    // 提交审核
    async submitAudit () {
      // 提交前先判断
      if (!this.auditStatus) {
        this.$message({
          message: '请先审核',
          duration: 2000,
          type: 'warning'
        })
        return
      }
      if (this.auditStatus === '3' && !this.rejectReason) {
        // console.log(this.auditStatus)
        this.$message({
          message: '请填写拒绝原因',
          duration: 2000,
          type: 'warning'
        })
        return
      }
      // console.log(this.auditStatus)
      try {
        // 入参数据
        const data = {
          id: this.manager.id,
          status: this.auditStatus,
          rejectReason: this.auditStatus === '3' ? this.rejectReason : ''
        }
        // console.log(data)
        const res = await axios.put('http://localhost:8080/pixington/audit/manager', data)
        if (res.data.code === 0) {
          this.getNextManager() // 提交后获取下一条记录
          this.$message({
            message: '审核成功',
            type: 'success'
          })
        } else {
          // 处理错误情况
          this.$message({
            message: '审核失败',
            type: 'error'
          })
        }
      } catch (error) {
        // 网络请求错误处理
        console.error(error)
        this.$message({
          message: error.msg,
          type: 'error'
        })
      }
    }
  }
}
</script>

<style>

</style>
